<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
  <style>
  .search-btn {
    margin-left: 20px;
  }
  .tableBar{
    justify-content: flex-start !important;
  }
  .info-box{
    margin: -15px -44px 20px;
  }
  .info-box .item-box{
    display: flex;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    text-align: left;
    margin-bottom: 14px;
  }
  .info-box .item-box:last-child{
    margin-bottom: 0;
  }
  .info-box .item-box .label{
    width: 96px;
  }
  .info-box .item-box .des{
    flex: 1;
    color: #333333;
  }
  .dishratios{
    width:550px ;
    height:260px;
    border:2px solid green;
  }
  .setmealratios{
      width:550px ;
      height:260px;
      border:2px solid green;
      margin: -260px 300px 700px 700px;
  }
  .dishratio{
      width:550px ;
      height:260px;
      border:2px solid green;
      margin: -700px 20px 0px 0px;
  }
  .setmealratio{
      width:550px ;
      height:260px;
      border:2px solid green;
      margin: -260px 600px -400px 700px;
  }
  .income{
      width:550px ;
      height:260px;
      border:2px solid green;
      margin: 400px 0px 600px 0px;
  }
  </style>

</head>
<body>
  <div class="dashboard-container" id="statics-app">
    <div  class="dishratios" id="container" ></div>
      <div class="setmealratios" id="container1"></div>
      <div class="dishratio"></div>
      <div class="setmealratio"></div>
      <div class="income"></div>
  </div>
   <script  src="../../plugins/echarts/echarts.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../api/statics.js"></script>
    <script>
      new Vue({
        el: '#statics-app',
        data() {
          return {
            opinionData: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ]
          }
        },
        mounted() {
           this.drawpieForDishRatio()
        },
        methods: {
            drawpieForDishRatio(){
                drawpieForDishRatioAPI().then(res=>{

                    }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },

            /*res=>{
                var dom = document.getElementById('container');
                var myChart = echarts.init(dom, null, {
                    renderer: 'canvas',
                    useDirtyRect: false
                });
                var app = {};

                var option;

                option = {
                    title: {
                        text: '各菜系营收占比分析',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data:this.opinionData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }

                window.addEventListener('resize', myChart.resize);*/
        }

      })
    </script>
</body>
</html>